<template>
  <div id="index">
    <div class="header">
      <span class="headerTitle">VR展示</span>
    </div>
    <div class="body">
      <el-row style="height: 100%">
        <el-col span="12" style="height: 50%;padding: 0.625rem 0.625rem 0;">
          <div class="vr">地上全景</div>
        </el-col>
        <el-col span="12" style="height: 50%;padding: 0.625rem 0.625rem 0;">
          <div class="vr">地上局部</div>
        </el-col>
        <el-col span="12" style="height: 50%;padding: 0.625rem 0.625rem 0;">
          <div class="vr">地下全景</div>
        </el-col>
        <el-col span="12" style="height: 50%;padding: 0.625rem 0.625rem 0;">
          <div class="vr">地下局部</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {

  }
</script>
<style>
  #index{
    width: 100%;
    height: 850px;
    margin: 0 auto;
    padding: 0.625rem 0.625rem 0;
  }
  .body{
    width: 100%;
    height: 90%;
  }
  .header{
    text-align: center;
  }
  .headerTitle{
    font-size: 1.875rem;
  }
  .vr{
    height: 100%;
    border:3px solid #5a5e66;
  }
</style>
